<template>
  <view class="t-cell" :class="{ 't-cell--hover': hover }" @tap="onTap">
    <view class="t-cell__icon"><slot name="leftIcon" /></view>
    <view class="t-cell__content">
      <view class="t-cell__title">{{ title }}</view>
      <view v-if="description" class="t-cell__desc">{{ description }}</view>
    </view>
    <view class="t-cell__extra"><slot name="note" /></view>
    <view v-if="arrow" class="t-cell__arrow">›</view>
  </view>
</template>

<script setup>
/**
 * TDesign Cell 精简版
 * - 支持 title、description、hover、arrow
 */
const props = defineProps({
  title: { type: String, default: '' },
  description: { type: String, default: '' },
  hover: { type: Boolean, default: false },
  arrow: { type: Boolean, default: false }
})

/**
 * 点击事件透传
 */
const emit = defineEmits(['tap'])
function onTap(e) { emit('tap', e) }
</script>

<style>
.t-cell { display: flex; align-items: center; padding: 24rpx; border-top: 1rpx solid #f0f0f0; }
.t-cell:first-child { border-top: none; }
.t-cell--hover { background: #fafafa; }
.t-cell__icon { width: 40rpx; margin-right: 16rpx; display: flex; justify-content: center; }
.t-cell__content { flex: 1; }
.t-cell__title { font-size: 28rpx; color: #1f1f1f; }
.t-cell__desc { font-size: 24rpx; color: #8c8c8c; margin-top: 4rpx; }
.t-cell__extra { margin-left: 12rpx; color: var(--td-brand-color, #f5a623); font-size: 24rpx; }
.t-cell__arrow { margin-left: 16rpx; color: #ccc; }
</style>

